// src/utils/highlightUtils.js

/**
 * 添加高亮图层
 * @param {Object} map - 地图实例
 * @param {Object} feature - 要高亮的要素
 */
export const addHighlightLayer = async (map, feature) => {
  // 移除旧的高亮图层
  if (map.getLayer("highlightLayer")) {
    removeHighlightLayer(map)
  }

  // 根据 kind 设置高亮图片
  const kind = feature.properties.kind
  const highlightImage = kind === "Ball" ? "ball-highlight" : "gun-highlight"

  // 动态加载高亮图片
  let imageUrl
  if (kind === "Ball") {
    imageUrl = (await import("@/assets/球机摄像头_高亮.png")).default
  } else {
    imageUrl = (await import("@/assets/枪机摄像头_高亮.png")).default
  }

  // 加载高亮图片
  map.loadImage(imageUrl, (error, image) => {
    if (error) throw error

    // 添加高亮图片到地图
    if (!map.hasImage(highlightImage)) {
      map.addImage(highlightImage, image)
    }

    // 添加高亮数据源
    map.addSource("highlightSource", {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [feature], // 只包含当前点击的要素
      },
    })

    // 添加高亮图层
    map.addLayer({
      id: "highlightLayer",
      type: "symbol", // 使用 symbol 图层
      source: "highlightSource",
      layout: {
        "icon-image": highlightImage, // 根据 kind 设置高亮图片
        "icon-size": 3.0, // 图标大小
        "icon-allow-overlap": true, // 允许图标重叠
      },
      paint: {
        "icon-opacity": 0.8, // 图标透明度
      },
    })
  })
}

/**
 * 删除高亮图层
 * @param {Object} map - 地图实例
 */
export const removeHighlightLayer = (map) => {
  if (map.getLayer("highlightLayer")) {
    map.removeLayer("highlightLayer")
  }
  if (map.getSource("highlightSource")) {
    map.removeSource("highlightSource")
  }
}
